<template>
  <el-dialog :title="form.id? '编辑部门':'新增部门'" :visible="dialogFormVisible">
    <el-form :model="form" :rules="rules" label-width="100px" ref="myform">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" placeholder="请选择">
          <el-option
            v-for="(item, index) in list"
            :key="index"
            :label="item.username"
            :value="item.username"
          ></el-option>
          <!-- <el-option label="部门一" value="shanghai"></el-option>
          <el-option label="部门二" value="beijing"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getDeptApi,
  addDeptApi,
  getSimpleDeptApi,
  getDeptDetailApi,
  updateDeptApi
} from "../../../api/departments";
export default {
  props: ["dialogFormVisible", "id"],
  data() {
    return {
      form: {
        name: "",
        code: "",
        manager: "",
        introduce: ""
      },
      list: [],
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "1-50个字符", trigger: "blur" },
          {
            validator: async (rules, value, callback) => {
              // 同级部门中禁止出现重复的部门
              // 得到所有的部门数据
              const res = await getDeptApi();
              // console.log(res);
              if (!this.form.id) {
                // 新增操作
                res.data.depts.some(
                  item => item.pid === this.id && item.name === value
                )
                  ? callback(new Error("部门名称不能相同"))
                  : callback();
              } else {
                // 编辑操作
                res.data.depts.some(
                  item =>
                    item.pid === this.form.pid &&
                    item.id !== this.form.id &&
                    item.name === value
                )
                  ? callback(new Error("部门名称不能相同"))
                  : callback();
              }
            },
            trigger: "blur"
          }
        ],
        code: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "1-50个字符", trigger: "blur" },
          {
            // 添加自定义校验规则
            validator: async (rules, value, callback) => {
              // 得到所有的部门数据
              const res = await getDeptApi();
              // console.log(res);
              if (!this.form.id) {
                // 新增操作
                // 部门编码在整个模块中都不允许重复
                // 遍历数据，判断是否存在相同的code
                res.data.depts.some(item => item.code === value)
                  ? callback(new Error("部门编码不能相同"))
                  : callback();
              } else {
                // 编辑操作
                res.data.depts.some(
                  item => item.code !== this.form.code && item.code === value
                )
                  ? callback(new Error("部门编码不能相同"))
                  : callback();
              }
            },
            trigger: "blur"
          }
        ],
        manager: {
          required: true,
          message: "部门名称不能为空",
          trigger: "blur"
        },
        introduce: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          { min: 1, max: 300, message: "1-300个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submit() {
      // 全局验证
      this.$refs.myform.validate(async res => {
        if (res) {
          // 验证通过
          // 发送请求
          if (this.form.id) {
            updateDeptApi(this.form);
          } else {
            await addDeptApi({
              ...this.form,
              pid: this.id
            });
          }
          // 关闭窗口
          this.$emit("update:dialogFormVisible", false);
          // 提示新增/编辑成功
          this.$message({
            type: "success",
            message: this.form.id ? "修改成功" : "新增成功"
          });
          // 更新数据
          this.$emit("updateData");
          // 清空表单数据
          this.form = {
            name: "",
            code: "",
            manager: "",
            introduce: ""
          };
        } else {
          // 验证失败
          console.log("验证失败");
        }
      });
    },
    cancel() {
      // 关闭面板
      this.$emit("update:dialogFormVisible", false);
      // 重置校验
      this.$refs.myform.resetFields()
      // 重置数据
      this.form = {
        name: "",
        code: "",
        manager: "",
        introduce: ""
      };
    },
    // 得到当前操作部门的详情
    async getDeptDetail(id) {
      // 得到当前操作部门的详情
      const res = await getDeptDetailApi(id);
      // 保存需要编辑的数据
      this.form = res.data;
    }
  },
  async created() {
    const res = await getSimpleDeptApi();
    // console.log(list)
    this.list = res.data;
  }
};
</script>

<style>
</style>